﻿@{
    Layout = null;
}
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="keywords" content="@Html.Raw(@ViewBag.title)">
    <meta name="description" content="@Html.Raw(@ViewBag.title)">
    <link rel="stylesheet" href="~/css/bootstrap.table.min.css" />
    <link rel="stylesheet" href="~/lib/adminlte/css/AdminLTE.icon.font.min.css" />
    <title>
        @Html.Raw(@ViewBag.title)
    </title>
    <style>
        body {
            background: url('image/background.jpg') no-repeat center center !important;
            background-size: cover;
        }

        html {
            overflow-y: hidden;
        }

        .login-box-body {
            background: none;
            z-index: 999999;
        }

        .login-logo a {
            color: #fff;
        }

        .snow-container {
            position: fixed;
            top: -1px;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
    </style>
</head>
<body class="hold-transition login-page">
    <div id="app">
        <div class="snow-container">
        </div>
        <div class="login-box">
            <div class="login-logo">
                <a href="javascript:void(0)">
                    <b>KopSoft</b> MES
                </a>
            </div>
            <div class="login-box-body" :keydown.enter="checkLogin">
                <form method="post" onsubmit="return false">
                    <div class="form-group has-feedback">
                        <input type="text" v-model="UserNickname" v-focus class="form-control" placeholder="账号">
                        <span class="fa fa-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" v-model="Pwd" class="form-control" placeholder="密码" autocomplete="off">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <button type="submit" :disabled="disabled" class="btn btn-primary btn-block btn-flat" v-bind:class="{ 'btn-grey': isSelected}" v-on:click="checkLogin">{{submit}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="~/lib/jquery/3.0/jquery.min.js"></script>
    <script src="~/js/snow.min.js"></script>
    <script src="~/lib/layer/layer.js"></script>
    <script src="~/js/vqypa.min.js"></script>
    <script src="~/js/eruda.min.js"></script>
    <script type="text/javascript">
        //eruda.init();
        var app = new Vue({
            el: '#app',
            data: {
                UserNickname: 'william',
                Pwd: '000000',
                disabled: false,
                submit: "登录",
                reset: "取消",
                isSelected: false
            },
            methods: {
                checkLogin: function () {
                    var _self = this;
                    _self.disabled = true;
                    _self.isSelected = true;
                    //es5写法
                    if (_self.UserNickname.length <= 0) {
                        layer.msg('账号不能为空', { icon: 5 });
                        _self.disabled = false;
                        _self.isSelected = false;
                        return false;
                    }
                    if (_self.Pwd.length <= 0) {
                        layer.msg('密码不能为空', { icon: 5 });
                        _self.disabled = false;
                        _self.isSelected = false;
                        return false;
                    }
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    //n = {
                    //    "sys": {
                    //        UserNickname: _self.UserNickname,
                    //        Pwd: _self.Pwd
                    //    }
                    //};
                    yui.$axiospost('/Login/CheckLoginAsync', {
                        UserNickname: _self.UserNickname,
                        Pwd: _self.Pwd
                    })
                        .then(function (response) {
                            _self.disabled = false;
                            _self.isSelected = false;
                            if (response.data.item1) {
                                //_self.speeh("正在跳转请稍后");
                                _self.submit = "正在跳转。。。请稍后！";
                                location.href = "/Home";
                            } else {
                                layer.close(index);
                                layer.msg(response.data.item2 || errorMsg, { icon: 5 });
                            }
                        })
                        .catch(function (error) {
                            _self.disabled = false;
                            _self.isSelected = false;
                            layer.close(index);
                        });
                },
                cancel: function () {
                    var _self = this;
                    _self.Pwd = _self.UserNickname = "";
                },
                speeh: function (val) {
                    //只支持PC
                    var msg = new SpeechSynthesisUtterance(val);
                    msg.volume = 100;
                    msg.rate = 1;
                    msg.pitch = 1.5;
                    window.speechSynthesis.speak(msg);
                }
            }
        });
    </script>
</body>
</html>